Table of Content¶

  • Why learn CSS Variables
  • Your first variable
  • Overiding variables
  • Local variables
  • Theming
  • Changing variables with JavaScript
  • Responsiveness and variables
  • Two inheritance example
  • Credits

Why learn CSS Variables¶

  • We can declare a variable once and apply it to multiple places.
  • The old way:

image-2.png

  • The new way:

image.png

  • Advantages over LESS and SASS:

image-3.png

Your first variable¶

  • Defining variables in the :root element (ie the tag element) enables us to access the variable from any of its descendents
/* css */

/* defining css variable on root element ie <html> tag (a pseudoclass) */
:root {
    --red: #ff6f69;
    --beige: #ffeead;
}

html, body {
    background: var(--beige); /* referencing the var */
    color: var(--red);
}

h1, p {
    color: var(--red); 
}

Overiding variables¶

  • Example of how to override variables set in root element.
  • Here, all of the descendents of .item class element inherit the new variable.

image-2.png

Local variables¶

  • Here, we do almost the same as previous example where we override variables, but the difference is: we are creating new variable in local scope. And this variable only exist in the scope it is defined in and its descendents.

image.png

Theming¶

  • Below is a more useful example on how we could utilize local variables to apply theming.
  • Here, we make a featured item stand out, the new variable value only applies to the local scope within the class (and its descendents).

    image-2.png

Changing variables with JavaScript¶

  • We can change any css variables with Javascript.
  • To query the element we defined the variable in, use document.querySelector( css_elem ). Where css_elem is the css selector we want to target.
  • To get the variables we defined under that element, use getComputedStyle( elem ). Where elem is the selected element we get from querySelector.
  • To get the value of a specific variable, use elemStyle.getPropertyValues( css_var ). Where elemStyle is the saved style returned from getComputedStyle() and css_var is the name of the css variable we want to extract.
  • To change a specific css variable, use elem.style.setProperty( css_var, new_value ). Where css_var is the css variable we want to change, and new_value is the new value we want to change it to.

image.png

Responsiveness and variables¶

  • We can override css variables in media query to take effect only for certain device width for example.
  • Here, we are changing the layout of the grid columns from 2 columns, defined in line 9 --columns: 200px 200px to 1 column in 50 --columns: 200px. We also changed the value of the --beige variable.

image.png

Two inheritance example¶

  1. When we refer a css variable to css another variable, we are copying the value directly.

image.png

  1. When we override css variable, we need to set it again to override root inheritance.

image-2.png

Credits¶

  • The course: https://v1.scrimba.com/learn/cssvariables